{% extends "profile/base.html" %}

{% block title %}权限测试{% endblock %}

{% block extra_css %}
<style>
    .permission-card {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border: none;
        overflow: hidden;
    }
    
    .permission-header {
        background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }
    
    .permission-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.9;
    }
    
    .permission-details {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .permission-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background-color: #28a745;
        color: white;
        border-radius: 20px;
        font-weight: 500;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .back-button {
        border-radius: 20px;
        padding: 10px 25px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .back-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card permission-card">
                <div class="permission-header">
                    <div class="permission-icon">
                        <i class="fas fa-key"></i>
                    </div>
                    <h1 class="mb-0">特殊权限测试</h1>
                    <p class="lead mb-0">您已成功通过特殊权限验证</p>
                </div>
                
                <div class="card-body p-4">
                    <div class="mb-4">
                        <h3 class="mb-3">当前用户信息</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>用户名:</strong> {{ current_user.username }}</p>
                                <p><strong>邮箱:</strong> {{ current_user.email }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>用户ID:</strong> {{ current_user.id }}</p>
                                <p><strong>权限状态:</strong> 已授权</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="permission-details">
                        <h4 class="mb-3">当前权限详情</h4>
                        <p>此页面需要 <code>special_permission</code> 权限才能访问。您已成功通过权限验证，可以访问此页面。</p>
                        
                        <div class="mt-3">
                            <h5>用户权限标签:</h5>
                            <div>
                                <span class="permission-badge">基础用户</span>
                                <span class="permission-badge">文件上传</span>
                                <span class="permission-badge">资料编辑</span>
                                <span class="permission-badge">特殊权限</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-success" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        <strong>测试成功!</strong> 您已通过特殊权限验证，可以访问此页面。
                    </div>
                    
                    <div class="text-center mt-4">
                        <a href="/test" class="btn btn-primary back-button me-2">
                            <i class="fas fa-arrow-left me-2"></i>返回测试页面
                        </a>
                        <a href="{{ url_for('profile.dashboard') }}" class="btn btn-outline-primary back-button">
                            <i class="fas fa-tachometer-alt me-2"></i>控制台
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}